<template>
    <div style="height:100%;width:100%;">
        <el-row class="mainContent el-row">
            <el-col :span="24">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="">
                        <el-input v-model="formInline.company" placeholder="公司名称"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="formInline.state" placeholder="状态">
                             <el-option label="不限" value=""></el-option>
                            <el-option label="未接收" value="1"></el-option>
                            <el-option label="待确认" value="2"></el-option>
                             <el-option label="等待排班" value="3"></el-option>
                            <el-option label="排班确认" value="4"></el-option>
                             <el-option label="等待发车" value="5"></el-option>
                            <el-option label="已发车" value="6"></el-option>
                            <el-option label="废单" value="7"></el-option>
                            <el-option label="接车完成" value="8"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-table :data="tableData" highlight-current-row style="width: 100%;">
                <el-table-column label="公司名称">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.company }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="出发地">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.dpprovince+'-'+scope.row.dpcity+'-'+scope.row.dpdistrict}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="目的地">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.dtprovince+'-'+scope.row.dtcity+'-'+scope.row.dtdistrict}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="行程时间">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.applytime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="航班号">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.trafficinfo }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="人数">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.passengernum }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="收费">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.amount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发布时间">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.applytime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.state | state }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini"  type="text" v-if="scope.row.state==1"  @click="receptionModel(scope.$index, scope.row)">接单</el-button>
                        <el-button size="mini"  type="text" v-if="scope.row.state==2" disabled>待确认</el-button>
                        <el-button size="mini"  type="text" v-if="scope.row.state==3"  @click="schedulingModel(scope.$index, scope.row)">排班</el-button>
                        <el-button size="mini"  type="text" v-if="scope.row.state==4" disabled>等待发车</el-button>
                        <el-button size="mini"  type="text" v-if="scope.row.state==5"@click="depart(scope.$index, scope.row)"  >发车</el-button>
                        <el-button size="mini"  type="text" v-if="scope.row.state==6" @click="orderEnd(scope.$index, scope.row)" >完成订单</el-button>
                        
                        <el-button size="mini"  type="text" v-if="scope.row.state!=7&&scope.row.state!=8" @click="closeOrder(scope.$index, scope.row)">取消</el-button>
                        <el-button size="mini" type="text" @click="$router.push({path:'orderDetail',query:{id:scope.row.id,from:'orderList',name:scope.row.name}})">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="orderPage.pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-row>
        <el-dialog title="接收此订单" :visible.sync="recepVisible" width="40%" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="recep" ref="editPwdForm" status-icon label-width="100px" style="text-align:left">
                 <el-form-item label="订单价格">
                    <el-col :span="18" prop="money">
                        <el-input v-model="recep.money"></el-input>
                    </el-col>
                    <el-col :span="6">
                           <span style="margin-left:10px"> (元/人)</span>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="recepVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="reception">确 定</el-button>
            </div>
        </el-dialog>

         <el-dialog title="确认排班" :visible.sync="schedulingVisible" width="40%" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="scheduling" ref="editPwdForm" status-icon label-width="100px" style="text-align:left">
                 <el-form-item label="司机"  prop="id">
                    <el-select v-model="scheduling.id" placeholder="司机">
                        <el-option v-for="(item,index) in driverList" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="recepVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="schedulingOrder">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            formInline: {},
            recep:{},
            recepVisible:false,
            orderId:'',
            schedulingVisible:false,
            scheduling:{},
            pnum:'',

            total: 1,
            tableData: [],
            orderPage: {
                pageNo:1,
                pageSize: 10,
            },
            driverList:{},
        }
    },
    filters: {
        state(val) {
            switch (val) {
               case 1:
                    return '未接收';
                    break
                case 2:
                    return '待确认';
                    break
                case 3:
                    return '等待排班';
                    break
                case 4:
                    return '排班确认';
                    break
                case 5:
                    return '等待发车';
                    break
                case 6:
                    return '已发车';
                    break
                case 7:
                    return '废单';
                    break
                case 8:
                    return '接车完成';
                    break
            }
        }
    },
    created() {
        this.orderList();
    },
    methods: {
        orderList() {
            this.listLoading = true;
            var obj = {
                data: {
                    company: this.formInline.company,
                    state: this.formInline.state,
                    pageNo: this.orderPage.pageNo,
                    pageSize: this.orderPage.pageSize,
                }
            };
            this.$http('/sys/queryOrderList', obj).then(resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.total = resp.data.total;
                }
                this.listLoading = false;
            })
        },

        listChauffer(){
            this.$http('/noAuth/ajaxListChauffeur', {}).then(resp => {
                if (resp.code == 1) {
                    this.driverList=resp.data
                }
            })
        },
        handleCurrentChange(val) {
            this.orderPage.pageNo = val;
            this.orderList();
        },
        receptionModel(index, row){
            this.recepVisible=true;
            this.orderId=row.id;
        },
        schedulingModel(index, row){
            this.pnum=row.passengernum;
             this.schedulingVisible=true;
            this.orderId=row.id;
            this.listChauffer();
        },
        reception(index, row){
            let obj={
                data: {
                    orderId :this.orderId,
                   	price: this.recep.money,
                }
            }
             this.$http('/sys/receivingOrder', obj).then(resp => {
                if (resp.code == 1) {
                    this.$message({
                        message: resp.msg,
                        type: 'success'
                    })

                } else {
                    this.$message({
                        message: resp.msg,
                        type: 'error'
                    })
                }
                this.recepVisible = false
                this.orderList()
               
            })
        },

        schedulingOrder(){
            let obj={
                data: {
                    orderId :this.orderId,
                   	chaufferId : this.scheduling.id,
                }
            }
             this.$http('/sys/schedulingOrder', obj).then(resp => {
                if (resp.code == 1) {
                    this.$message({
                        message: resp.msg,
                        type: 'success'
                    })

                } else {
                    this.$message({
                        message: resp.msg,
                        type: 'error'
                    })
                }
                this.schedulingVisible = false
                this.orderList()
               
            })
        },
        depart(index,row){
             this.$confirm("确认发车?", "提示", {})
                .then(() => {
                    this.$http('/sys/depart', { data: { orderId: row.id} }).then(resp => {
                        if (resp.code == 1) {
                            this.$message({
                                message: resp.msg,
                                type: "success"
                            });
                        } else {
                            this.$message({
                                message: resp.msg,
                                type: "error"
                            });
                        }
                        this.orderList();
                    })
                })
                .catch(() => { });
        },
        orderEnd(index,row){
             this.$confirm("确认完成?", "提示", {})
                .then(() => {
                    this.$http('/sys/orderEnd', { data: { orderId: row.id} }).then(resp => {
                        if (resp.code == 1) {
                            this.$message({
                                message: resp.msg,
                                type: "success"
                            });
                        } else {
                            this.$message({
                                message: resp.msg,
                                type: "error"
                            });
                        }
                        this.orderList();
                    })
                })
                .catch(() => { });
        },
        closeOrder(index,row){
              this.$confirm("确认取消?", "提示", {})
                .then(() => {
                    this.$http('/sys/cancelOrder', { data: { orderId : row.id} }).then(resp => {
                        if (resp.code == 1) {
                            this.$message({
                                message: resp.msg,
                                type: "success"
                            });
                        } else {
                            this.$message({
                                message: resp.msg,
                                type: "error"
                            });
                        }
                        this.orderList();
                    })
                })
                .catch(() => { });
        },
        onSubmit() {
            this.orderList();
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        }
    }
}
</script>
<style>
.demo-form-inline {
    text-align: left;
}
</style>
